<!DOCTYPE html>
<html>
	{include file="public1/_header" /}
	<script type="text/javascript" src="__STATIC__/admin/js/vue.min.js"></script>
	<!-- 编辑器源码文件 -->
	<script type="text/javascript" src="__STATIC__/admin/js/dom-to-image.min.js"></script>
	<script type="text/javascript" src="__STATIC__/admin/js/vue.drag-and-drop.js"></script>
	<style type="text/css">
		li{
			list-style: none;
		}
		*,ul,li,p,div{
			user-select: none;
			padding: 0;
			margin: 0;
			box-sizing: border-box;
			font-size: 12px;
		}
		.layout-content-box{
		  background: #fff;
		  padding: 4px;
		}
		.layout{
		  display: flex;
		  min-width: 900px;
		  overflow: auto;
		}
		.content-box{
			position: relative;
			overflow: hidden;
		}
		.box-list{
			position: relative;
			box-sizing: content-box;
			background: #00b6ff;
			overflow: hidden;
		  display: flex;
		  flex-wrap: wrap;
		  width: 935px;
		}
		.list-ul{
			float: left;
			padding: 6px;
		}
		.box-list-border{
		  height: 100%;
			border-radius: 10px;
			font-size: 26px;
			color: #ddd;
			text-align: center;
			background: #fff;
		}
		.box-list-border.on{
			background: yellow;
		}
		.box-list-border.active{
			background: red;
		}
		.content-img{
			position: absolute;
			left: 0px;
			top: 0px;
		}
		.ant-btn{
		  padding: 0 15px;
		}
		.img-box{
			position: absolute;
			top: 0px;
			left: 0px;
		
		}
		.img-border{
			padding: 6px;
			box-sizing: border-box;
		}
		.img-box img{
			width: 100%;
			height: 100%;
			border-radius: 8px;
		}
		.img-box:hover .close{
			display: inline-block;
		}
		.close{
			display: none;
			position: absolute;
			top: 0px;
			right: 0px;
			width: 40px;
			height: 40px;
			font-style: normal;
			font-size: 20px;
			color: #fff;
			background: rgba(22,22,22,0.5);
			border-radius: 50%;
			border: 2px solid rgba(222,222,222,0.8);
			text-align: center;
			line-height: 30px;
			box-sizing: border-box;
			cursor: pointer;
			z-index: 1000;
		}
		
		.components{
			width: 255px;
			height: 600px;
			overflow: hidden;
			background: #f5f5f5;
			margin-left: 2px;
		}
		.component-title{
			height: 45px;
			line-height: 45px;
			text-indent: 20px;
		}
		.component-type{
		  background: #ddd;
		}
		.component-type ul{
			display: flex;
			padding-left: 10px;
			height: 35px;
			line-height: 35px;
		
		}
		.component-type ul li{
			padding: 0px 8px;
			cursor: pointer;
			position: relative;
		}
		.component-lists{
			overflow: auto;
			height: 510px;
			background: #fffff;
		}
		.component-lists ul{
		  display: flex;
		  flex-wrap: wrap;
		  justify-content: center;
		}
		.component-lists ul li{
			height: 180px;
			background: #fff;
			margin: 10px;
			width: 260px;
			cursor: pointer;
		}
		.component-content{
		  box-sizing: border-box;
		  padding: 10px;
		  display: flex;
		  align-items: center;
		  height: 180px;
		  border: 1px solid #fff;
		  border-radius: 8px;
		}
		.component-content:hover{
		  border: 1px solid #0099E8;
		}
		.component-img{
		
		}
		.component-img img{
		  max-height: 170px;
		  max-width: 100px;
		}
		.component-desc{
		  display: flex;
		  height: 180px;
		  flex-direction: column;
		  padding: 0 10px;
		  justify-content: center;
		}
		.showName{
		  font-weight: 700;
		}
		.brief{
		  font-size: 12px;
		}
		.on{
		  color: #fff;
		  background: #1890ff;
		}
		[v-cloak] {
		    display: none;
		}
		.layui-layout-admin {
			position: fixed;
			left: 0px;
			right: 0;
			bottom: 0;
			height: 60px;
			background-color: #fff;
			text-align: center;
			z-index: 1000;
			border-top: 1px solid #ddd;
		}
	</style>
	<body>
		<div id="app" v-cloak>
			
			<div class="layout-content-box">
			  <div class="layout" ref="layout">
			    <div class="content-box" ref="contentBox">
			      <div class="box-list" id="box" ref="maxbox">
			        <div ref="box" class="list-ul" :style="{'width':boxwidth+'px','height':boxheight+'px','lineHeight':boxheight+'px'}" v-for="(item,index) in arr" :key="index" @mouseleave="leave(index)">
			          <div :class="{'active':item[2] == false,'on':item[3]}" class="box-list-border">{{index+1}}</div>
			        </div>
					
			      </div>
			      <div class="content-img" ref="showImg" :style="{'width':boxmaxwidth+'px','height':boxmaxheight+'px'}">
			        <div v-for="(item,index) in imgBox" class="img-box" :key="index">
			          <div class="img-border" v-drag-and-drop @click="getType(item)" @drag="handleDrag($event,item,true)"
			            @dragend="handleDragEnd(item,index,true)" :style="{'position':'absolute', 'width':boxwidth*item.width+'px','height':boxheight*item.height+'px','top':item.top+'px','left':item.left+'px'}">
			            <img :src="item.thumb" draggable="false">
			            <i class="close" @click="closeImg(item)">x</i>
			          </div>
			        </div>
			      </div>
					<form class="layui-form" action="">
						<div class="layui-card">
							<div class="layui-card-body" style="overflow: hidden;">
								
								<div class="layui-form-item">
									<div class="layui-inline">
										 <label class="layui-form-label" style="width: 120px;">模板标题 <span style='color:red'>*</span></label>
										 <div class="layui-input-inline">
										   <input type="text" name="title" required  lay-verify="required" placeholder="模板标题" autocomplete="off" class="layui-input">
										 </div>
									</div>
									<div class="layui-inline">
										 <label class="layui-form-label" style="width: 120px;">模板描述 <span style='color:red'>*</span></label>
										 <div class="layui-input-inline">
										   <input type="text" name="describe" required  lay-verify="required" placeholder="模板标题" autocomplete="off" class="layui-input">
										 </div>
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-inline">
										<label class="layui-form-label" style="width: 120px;">排序 <span style='color:red'>*</span></label>
										<div class="layui-input-inline">
										  <input type="number" value="100" name="sort" required  lay-verify="required" placeholder="排序" autocomplete="off" class="layui-input">
										</div>
									</div>
								</div>

								
								<div style="text-align: center;" class="layui-layout-admin">
									<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
									<button type="button" id="close"  class="layui-btn layui-btn-primary">放弃</button>
								</div>
							</div>
						</div>
					</form>
				</div>
			    <div class="components">
			      <div class="component-title">组件库</div>
			      <div class="component-type">
			        <ul>
			          <li @click="componentShow(0)" :class="typeIndex == 0 ? 'on':''">全部</li>
			          <li @click="componentShow(4)" :class="typeIndex == 4 ? 'on':''">1*3</li>
			          <li @click="componentShow(3)" :class="typeIndex == 3 ? 'on':''">1*2</li>
			          <li @click="componentShow(2)" :class="typeIndex == 2 ? 'on':''">2*1</li>
			          <li @click="componentShow(1)" :class="typeIndex == 1 ? 'on':''">1*1</li>
			          <li @click="componentShow(5)" :class="typeIndex == 5 ? 'on':''">2*2</li>
			        </ul>
			      </div>
			      <div class="component-lists">
			        <ul>
			          <li v-show="item.show" v-drag-and-drop @click="getType(item)" @drag="handleDrag($event,item,false)"
			            @dragend="handleDragEnd(item,index,false)" v-for="(item,index) in componentLists" :key="index">
			            <div class="component-content">
			              <div class="component-img"><img draggable="false" :src="item.thumb" alt=""></div>
			              <div class="component-desc">
			                <span class="showName">{{item.showName}}</span>
			                <span>{{item.width}}*{{item.height}}</span>
			                <span class="brief">{{item.brief}}</span>
			              </div>
			            </div>
			
			          </li>
			        </ul>
			      </div>
			    </div>
			  </div>
			</div>
			
		</div>
	</body>
	<script type="text/javascript">
		$(function(){
			var app = new Vue({
			  el: '#app',
			  data: {
			    offsetLeft:0,
			    maxWidth: 6,
			    maxHeight: 4,
			    type: 0,
			    typeIndex:0,
			    boxwidth: 0,
			    boxheight: 0,
			    arr: [
			      [0, 0, true, false],
			      [1, 0, true, false],
			      [2, 0, true, false],
			      [3, 0, true, false],
			      [4, 0, true, false],
			      [5, 0, true, false],
			      [0, 1, true, false],
			      [1, 1, true, false],
			      [2, 1, true, false],
			      [3, 1, true, false],
			      [4, 1, true, false],
			      [5, 1, true, false],
			      [0, 2, true, false],
			      [1, 2, true, false],
			      [2, 2, true, false],
			      [3, 2, true, false],
			      [4, 2, true, false],
			      [5, 2, true, false],
			      [0, 3, true, false],
			      [1, 3, true, false],
			      [2, 3, true, false],
			      [3, 3, true, false],
			      [4, 3, true, false],
			      [5, 3, true, false]
			    ],
			    imgBox: [],
			    componentLists: {$components},
			    boxmaxwidth: 0,
			    boxmaxheight: 0,
			    originX: 0,
			    originY: 0,
			    hideComponent:[],
			    isdown: false,
			    positionX: 0,
			    positionY: 0,
			    intersection: [] //当前组件碰撞后设置不可用key的数组
			  },
			  mounted() {
			    this.boxmaxwidth = this.$refs.maxbox.offsetWidth;
			    this.boxmaxheight = this.boxmaxwidth/2.213;
			    this.boxwidth = this.boxmaxwidth/6;
			    this.boxheight = this.boxmaxwidth/2.213/4;
			    this.offsetLeft = this.$refs.layout.offsetLeft;
			    this.offsetTop = this.$refs.layout.offsetTop;
			  },
			  methods: {
			    componentShow(type){
			      switch(type){
			        case 0:
			        this.typeIndex = 0;
			        this.componentLists.forEach((v,k)=>{
			          if(!this.in_array(v.id,this.hideComponent)){
			            console.log(111)
			            this.$set(this.componentLists[k], 'show', true);
			          }else{
			            this.$set(this.componentLists[k], 'show', false);
			          }
			        })
			        break;
			        case 1:
			        this.typeIndex = 1;
			        this.componentLists.forEach((v,k)=>{
			          if(v.type == 1){
			            if(!this.in_array(v.id,this.hideComponent)){
			              this.$set(this.componentLists[k], 'show', true);
			            }
			  
			          }else{
			            this.$set(this.componentLists[k], 'show', false);
			          }
			        })
			        break;
			        case 2:
			        this.typeIndex = 2;
			        this.componentLists.forEach((v,k)=>{
			          if(v.type == 2){
			            if(!this.in_array(v.id,this.hideComponent)){
			              this.$set(this.componentLists[k], 'show', true);
			            }
			          }else{
			            this.$set(this.componentLists[k], 'show', false);
			          }
			        })
			        break;
			        case 3:
			        this.typeIndex = 3;
			        this.componentLists.forEach((v,k)=>{
			          if(v.type == 3){
			            if(!this.in_array(v.id,this.hideComponent)){
			              this.$set(this.componentLists[k], 'show', true);
			            }
			          }else{
			            this.$set(this.componentLists[k], 'show', false);
			          }
			        })
			        break;
			        case 4:
			        this.typeIndex = 4;
			        this.componentLists.forEach((v,k)=>{
			          if(v.type == 4){
			            if(!this.in_array(v.id,this.hideComponent)){
			              this.$set(this.componentLists[k], 'show', true);
			            }
			          }else{
			            this.$set(this.componentLists[k], 'show', false);
			          }
			        })
			        break;
			        case 5:
			        this.typeIndex = 5;
			        this.componentLists.forEach((v,k)=>{
			          if(v.type == 5){
			            if(!this.in_array(v.id,this.hideComponent)){
			              this.$set(this.componentLists[k], 'show', true);
			            }
			          }else{
			            this.$set(this.componentLists[k], 'show', false);
			          }
			        })
			        break;
			      }
			    },
			    in_array(search,array){
			        for(var i in array){
			            if(array[i]==search){
			                return true;
			            }
			        }
			        return false;
			    },
			    getIndex(item, arr) {
			      for (var i = 0; i < arr.length; i++) {
			        if (arr[i]['id'] == item.id) {
			          return i;
			        }
			      }
			      return 0
			    },
			    getIndexid(id, arr) {
			      for (var i = 0; i < arr.length; i++) {
			        if (arr[i] == id) {
			          return i;
			        }
			      }
			      return 0
			    },
			    closeImg(item) {
			      var key = this.getIndex(item, this.imgBox);
			      item.place.forEach((vv, kk) => {
			        this.$set(this.arr[vv], 2, true);
			      })
			      this.imgBox.splice(key, 1);
			      var k = this.getIndex(item, this.componentLists);
			      var nkey = this.getIndexid(item.id,this.hideComponent);
			      this.hideComponent.splice(nkey, 1);
			      if(item.type == this.typeIndex){
			        this.$set(this.componentLists[k], 'show', true);
			      }else if(this.typeIndex == 0){
			        this.$set(this.componentLists[k], 'show', true);
			      }
			    },
			    getComponent(index) {
			      this.type = this.componentLists[index].type;
			    },
			    collision(originX, originY) {
			      switch (this.type) {
			        case 1:
			          return this.module1(originX, originY)
			          break;
			        case 2:
			          return this.module2(originX, originY)
			          break;
			        case 3:
			          return this.module3(originX, originY)
			          break;
			        case 4:
			          return this.module4(originX, originY)
			          break;
			        case 5:
			          return this.module5(originX, originY)
			          break;
			      }
			    },
			    leave() {
			      for (var i = 0; i <= this.arr.length - 1; i++) {
			        this.$set(this.arr[i], 3, false);
			      }
			    },
			    handleDragEnd(curitem, index, coyp) {
			      if (this.positionX <= this.boxmaxwidth && this.positionY <= this.boxmaxheight && this.positionX >= 0 && this.positionY >= 0) {
			        if (this.originX >= this.maxWidth || this.originY >= this.maxHeight) {
			          return false;
			        }
			        this.arr.forEach((item, index) => {
			          if (item[2]) {
			            this.$set(this.arr[index], 3, false);
			          }
			        })
			        if (this.isdown) {
			          let dataX = this.intersection;
			          dataX.push(this.valueKey(this.originX, this.originY));
			          let minKey = Math.min.apply(Math, dataX);
			          var origin = this.arr[minKey];
			          var left = this.boxwidth * origin[0];
			          var top = this.boxheight * origin[1]
			          var place = [];
			          var nplace = this.distinct(this.intersection);
			          nplace.forEach((item, index) => {
			            place.push(item);
			            this.$set(this.arr[item], 2, false);
			          })
			  
			  
			          this.imgBox.push({
			            "showName": curitem.showName,
			            "width": curitem.width,
			            "height": curitem.height,
			            "thumb": curitem.thumb,
			            "id": curitem.id,
			            "brief": curitem.brief,
			            "type": curitem.type,
			            "top": top,
			            "left": left,
			            "place": place,
			            "show": curitem.show
			          })
					  console.log(this.imgBox,"拖入的组件");
					  console.log(this.arr,"24模块");
					  console.log(this.intersection,"碰撞禁止的模块");
					  console.log(this.hideComponent,"需要隐藏的组件");
			          this.$set(this.componentLists[index], 'show', false);
			          this.hideComponent.push(this.componentLists[index].id)
			          if (coyp) {
			            var key = this.getIndex(this.prevItem, this.imgBox);
			            this.prevItem.place.forEach((vv, kk) => {
			              this.$set(this.arr[vv], 2, true);
			            })
			            this.imgBox.splice(key, 1);
			          }
			        }
			  
			      }
			      this.arr.forEach((item, index) => {
			  
			        if (item[2]) {
			          this.$set(this.arr[index], 3, false);
			        }
			  
			      })
			    },
			    getType(item) {
			      this.type = item.type
			    },
			    handleDragstart(e, item) {
			      this.type = item.type
			    },
			    handleDrag(event, item, copy) {
				  var e = event || window.event;
					
			      if (copy) {
			        this.prevItem = item;
			        this.prevItem.place.forEach((vv, kk) => {
			          this.$set(this.arr[vv], 2, true);
			        })
			  
			      }
			      var boxmaxwidthoffsetLeft = this.$refs.maxbox.getBoundingClientRect().left;
			      var boxmaxwidthoffsetTop = this.$refs.maxbox.getBoundingClientRect().top;
			      this.type = item.type
				  if(e.x>0){
					  this.positionX = e.x - boxmaxwidthoffsetLeft;
					  this.positionY = e.y - boxmaxwidthoffsetTop;
					  this.originX = Math.floor(this.positionX / this.boxwidth);
					  this.originY = Math.floor(this.positionY / this.boxheight);
					  if (this.positionX <= this.boxmaxwidth && this.positionY <= this.boxmaxheight && this.positionX >= 0 && this.positionY >=
					    0) {
					    if (this.originX >= this.maxWidth || this.originY >= this.maxHeight) {
					      return false
					    }
					  			  
					    this.arr.forEach((item, index) => {
					  			  
					      if (item[2]) {
					        this.$set(this.arr[index], 3, false);
					      }
					    })
					    this.isdown = this.collision(this.originX, this.originY)
					  }
					  window.event? window.event.cancelBubble = true : e.stopPropagation();
					  return false;
				  }
			      
			  
			      
			    },
			    //1*1
			    module1(x, y) {
			      //判断1*1进行碰撞是否可用
			      this.intersection = [];
			      var key = this.valueKey(x, y);
			      if (!this.isAble(key)) {
			        //如果不可用返回 false
			        return false
			      }
			      this.$set(this.arr[key], 3, true);
			      this.intersection.push(key)
			      return true
			    },
			    //2*1
			    module2(x, y) {
			      this.intersection = []
			      var key = this.valueKey(x, y)
			      if (!this.isAble(key)) {
			        return false
			      }
			      if ((this.maxWidth - x) >= 2) {
			  
			        var right = this.isAble(key + 1);
			        if (right) {
			          this.$set(this.arr[key], 3, true);
			          this.$set(this.arr[key + 1], 3, true);
			          this.intersection.push(key);
			          this.intersection.push(key + 1);
			          return true
			        } else {
			          if (x % 4 == 0) {
			            return false
			          }
			          var left = this.isAble(key - 1);
			          if (left) {
			            this.$set(this.arr[key], 3, true);
			            this.$set(this.arr[key - 1], 3, true);
			            this.intersection.push(key);
			            this.intersection.push(key - 1);
			            return true
			          }
			        }
			      } else {
			        var left = this.isAble(key - 1);
			        if (left) {
			          this.$set(this.arr[key], 3, true);
			          this.$set(this.arr[key - 1], 3, true);
			          this.intersection.push(key);
			          this.intersection.push(key - 1);
			          return true
			        } else {
			          return false
			        }
			      }
			      return false
			    },
			    //1*2
			    module3(x, y) {
			      this.intersection = [];
			      var key = this.valueKey(x, y)
			      if (!this.isAble(key)) {
			        return false
			      }
			      if ((this.maxHeight - y) >= 2) {
			        var bottom = this.isAble(key + this.maxWidth);
			        if (bottom) {
			          this.$set(this.arr[key], 3, true);
			          this.$set(this.arr[key + this.maxWidth], 3, true);
			          this.intersection.push(key);
			          this.intersection.push(key + this.maxWidth);
			          return true
			        } else {
			          if (y == 0) {
			            return false
			          }
			          var top = this.isAble(key - this.maxWidth);
			          if (top) {
			            this.$set(this.arr[key], 3, true);
			            this.$set(this.arr[key - this.maxWidth], 3, true);
			            this.intersection.push(key);
			            this.intersection.push(key - this.maxWidth);
			            return true
			          }
			        }
			      } else {
			        var top = this.isAble(key - this.maxWidth);
			        if (top) {
			          this.$set(this.arr[key], 3, true);
			          this.$set(this.arr[key - this.maxWidth], 3, true);
			          this.intersection.push(key);
			          this.intersection.push(key - this.maxWidth);
			          return true
			        }
			      }
			      return false
			    },
			    //1*3
			    module4(x, y) {
			      this.intersection = [];
			      var key = this.valueKey(x, y)
			      if (!this.isAble(key)) {
			        return false
			      }
			  
			      if((this.maxHeight-y)>=3){
			        var bottom = this.isAble(key+this.maxWidth);
			        var bottomBottom = this.isAble(key+this.maxWidth*2);
			        if(bottom && bottomBottom ){
			          this.$set(this.arr[key], 3, true);
			          this.$set(this.arr[key+this.maxWidth], 3, true);
			          this.$set(this.arr[key+this.maxWidth*2], 3, true);
			          this.intersection.push(key);
			          this.intersection.push(key+this.maxWidth);
			          this.intersection.push(key+this.maxWidth*2);
			          return true
			        }else{
			          return false
			        }
			      }else if((this.maxHeight-y)==2){
			         var bottom = this.isAble(key+this.maxWidth);
			         var top = this.isAble(key-this.maxWidth);
			         if(bottom && top ){
			           this.$set(this.arr[key], 3, true);
			           this.$set(this.arr[key+this.maxWidth], 3, true);
			           this.$set(this.arr[key-this.maxWidth], 3, true);
			           this.intersection.push(key);
			           this.intersection.push(key+this.maxWidth);
			           this.intersection.push(key-this.maxWidth);
			           return true
			         }else{
			           return false
			         }
			  
			      }else if((this.maxHeight-y)==1){
			        var top = this.isAble(key-this.maxWidth);
			        var topTop = this.isAble(key-this.maxWidth*2);
			        if(top && topTop ){
			          this.$set(this.arr[key], 3, true);
			          this.$set(this.arr[key-this.maxWidth], 3, true);
			          this.$set(this.arr[key-this.maxWidth*2], 3, true);
			          this.intersection.push(key);
			          this.intersection.push(key-this.maxWidth);
			          this.intersection.push(key-this.maxWidth*2);
			         return true
			        }else{
			          return false
			        }
			       return true
			      }else{
			        return false
			      }
			    },
			    position(quadrant, key) {
			      switch (quadrant) {
			        case 1:
			          var left = this.isAble(key - 1);
			          var top = this.isAble(key - this.maxWidth);
			          var leftTop = this.isAble(key - this.maxWidth - 1);
			          if (left && top && leftTop) {
			            this.$set(this.arr[key - 1], 3, true);
			            this.$set(this.arr[key - this.maxWidth], 3, true);
			            this.$set(this.arr[key - this.maxWidth - 1], 3, true);
			            this.$set(this.arr[key], 3, true);
			            this.intersection.push(key);
			            this.intersection.push(key - 1);
			            this.intersection.push(key - this.maxWidth);
			            this.intersection.push(key - this.maxWidth - 1);
			            return true;
			          } else {
			            return false;
			          }
			          break;
			        case 2:
			          var right = this.isAble(key + 1);
			          var top = this.isAble(key - this.maxWidth);
			          var rightTop = this.isAble(key - this.maxWidth + 1);
			          if (right && top && rightTop) {
			            this.$set(this.arr[key + 1], 3, true);
			            this.$set(this.arr[key - this.maxWidth], 3, true);
			            this.$set(this.arr[key - this.maxWidth + 1], 3, true);
			            this.$set(this.arr[key], 3, true);
			            this.intersection.push(key);
			            this.intersection.push(key + 1);
			            this.intersection.push(key - this.maxWidth);
			            this.intersection.push(key - this.maxWidth + 1);
			            return true;
			          } else {
			            return false;
			          }
			          break;
			        case 3:
			          //左下
			          var left = this.isAble(key - 1);
			          var bottom = this.isAble(key + this.maxWidth);
			          var leftBottom = this.isAble(key + this.maxWidth - 1);
			          if (left && bottom && leftBottom) {
			            this.$set(this.arr[key - 1], 3, true);
			            this.$set(this.arr[key + this.maxWidth], 3, true);
			            this.$set(this.arr[key + this.maxWidth - 1], 3, true);
			            this.$set(this.arr[key], 3, true);
			            this.intersection.push(key);
			            this.intersection.push(key - 1);
			            this.intersection.push(key + this.maxWidth);
			            this.intersection.push(key + this.maxWidth - 1);
			            return true;
			          } else {
			            return false;
			          }
			          break;
			        case 4:
			          var right = this.isAble(key + 1);
			          var bottom = this.isAble(key + this.maxWidth);
			          var rightBottom = this.isAble(key + this.maxWidth + 1);
			          if (right && bottom && rightBottom) {
			            this.$set(this.arr[key + 1], 3, true);
			            this.$set(this.arr[key + this.maxWidth], 3, true);
			            this.$set(this.arr[key + this.maxWidth + 1], 3, true);
			            this.$set(this.arr[key], 3, true);
			            this.intersection.push(key);
			            this.intersection.push(key + 1);
			            this.intersection.push(key + this.maxWidth);
			            this.intersection.push(key + this.maxWidth + 1);
			            return true;
			          } else {
			            return false;
			          }
			          break;
			        default:
			          return false;
			  
			      }
			    },
			    //2*2
			    module5(x, y) {
			      this.intersection = [];
			      var key = this.valueKey(x, y)
			      if (!this.isAble(key)) {
			        return false
			      }
			  
			      if (x == 0 && y == 0) { //左上角
			        //右下
			        return this.position(4, key);
			      } else if (x == this.maxWidth - 1 && y == 0) { //右上角
			        //左下
			        return this.position(3, key);
			      } else if (x == 0 && y == this.maxHeight - 1) { //左下角
			        //右上
			        return this.position(2, key);
			      } else if (x == this.maxWidth - 1 && y == this.maxHeight - 1) { //右下角
			        //左上
			        return this.position(1, key);
			      } else if (0 < x < this.maxWidth - 1 && y == 0) { //上边
			        //右下左下
			        var quadrant4 = this.position(4, key);
			  
			        if (!quadrant4) {
			          return this.position(3, key);
			        } else {
			          return true
			        }
			  
			      } else if (0 < x < this.maxWidth - 1 && y == this.maxHeight - 1) { //下边
			        //右上左上
			        var quadrant2 = this.position(2, key);
			        if (!quadrant2) {
			          return this.position(1, key);
			        } else {
			          return true
			        }
			      } else if (x == 0 && 0 < y < this.maxHeight - 1) { //左边
			        //右下右上
			        var quadrant4 = this.position(4, key);
			        if (!quadrant4) {
			          return this.position(2, key);
			        } else {
			          return true
			        }
			      } else if (x == this.maxWidth - 1 && 0 < y < this.maxHeight - 1) { //右边
			        //左上左下
			        var quadrant1 = this.position(1, key);
			        if (!quadrant1) {
			          return this.position(3, key);
			        } else {
			          return true
			        }
			      } else {
			        //全判(中间部分)
			        var quadrant4 = this.position(4, key);
			        if (!quadrant4) {
			          var quadrant3 = this.position(3, key);
			          if (!quadrant3) {
			            var quadrant2 = this.position(2, key);
			            if (!quadrant2) {
			              return this.position(1, key);
			            } else {
			              return true
			            }
			          } else {
			            return true
			          }
			        } else {
			          return true
			        }
			      }
			    },
			    postX(x) {
			      var narr = [];
			      this.arr.forEach(function(item, index) {
			        if (item[0] == x && item[2] == true) {
			          narr.push(item);
			        }
			      })
			      return narr;
			    },
			    isAble(key) {
			      return this.arr[key][2];
			    },
			    setAble(key, status) {
			      this.arr[key][2] = status
			    },
			    isArrayFn(value){
			      if (typeof Array.isArray === "function") {
			          return Array.isArray(value);
			      }else{
			          return Object.prototype.toString.call(value) === "[object Array]";
			      }
			    },
			    sortNumber(a,b){
			      return a - b
			    },
			    distinct(arr) {
			      if(this.isArrayFn(arr)){
			       let result = []
			       let obj = {}
			  
			       for (let i of arr) {
			           if (!obj[i]) {
			               result.push(i)
			               obj[i] = 1
			           }
			       }
			       var res = result.sort(this.sortNumber);
			        return res
			      }
			      return 'no array'
			    },
			    valueKey(x, y) {
			      var x = Number(x);
			      var y = Number(y);
			      if (x == 0 && y == 0) {
			        return 0
			      } else if (x == 1 && y == 0) {
			        return 1
			      } else if (x == 2 && y == 0) {
			        return 2
			      } else if (x == 3 && y == 0) {
			        return 3
			      } else if (x == 4 && y == 0) {
			        return 4
			      } else if (x == 5 && y == 0) {
			        return 5
			      } else if (x == 0 && y == 1) {
			        return 6
			      } else if (x == 1 && y == 1) {
			        return 7
			      } else if (x == 2 && y == 1) {
			        return 8
			      } else if (x == 3 && y == 1) {
			        return 9
			      } else if (x == 4 && y == 1) {
			        return 10
			      } else if (x == 5 && y == 1) {
			        return 11
			      } else if (x == 0 && y == 2) {
			        return 12
			      }else if (x == 1 && y == 2) {
			        return 13
			      } else if (x == 2 && y == 2) {
			        return 14
			      } else if (x == 3 && y == 2) {
			        return 15
			      } else if (x == 4 && y == 2) {
			        return 16
			      } else if (x == 5 && y == 2) {
			        return 17
			      } else if (x == 0 && y == 3) {
			        return 18
			      } else if (x == 1 && y == 3) {
			        return 19
			      } else if (x == 2 && y == 3) {
			        return 20
			      } else if (x == 3 && y == 3) {
			        return 21
			      } else if (x == 4 && y == 3) {
			        return 22
			      } else if (x == 5 && y == 3) {
			        return 23
			      }else{
			        return 0
			      }
			    }
			  }
			})
			layui.use(['form'], function() {
				var form = layui.form;
				var $ = layui.jquery;
				var laoding = "";
				//监听提交
				form.on('submit(formDemo)', function(obj) {
					
					var l = app.$data.arr;

					var nl = check_length(l);
					if(!nl){
						var shareContent = app.$refs.showImg;
						domtoimage.toPng(shareContent,{bgcolor:'#00b6ff'}).then(function(dataUrl) {
						  var data = {
						    title: obj.field.title,
						    describe: obj.field.describe,
							sort: obj.field.sort,
						    image: dataUrl,
						    template_code: app.$data.imgBox,
						    is_school_msg: 1,
						    type: 1
						  }
						  var index = parent.layer.getFrameIndex(window.name);
						  var lfc = top.layerFrameConfig;
						  var info = lfc.iframeB.info;
						  laoding = layer.load(1);
						  // console.log(data)
						  $.post("{:url('add')}",data,function(res){
							  if (res.status == 1) {
							  		layer.msg('添加成功', {
							  			icon: 1,
							  			time: 300
							  		}, function() {
										layer.close(laoding);
							  			parent.layer.close(index); //再执行关闭
							  			info.reload()
							  		});
							  
							  	} else {
							  		layer.msg(res.message)
							  	}
						  })
						  
						}).catch(function(error) {
						  console.error('oops, something went wrong!', error);
						});
						
					}else{
						console.log("长度不够");
					}
					
					return false;
				})
				$("#close").click(function(){
					var index = parent.layer.getFrameIndex(window.name);
					parent.layer.close(index);
				})
				function check_length(data){
					var len = 0;
					data.forEach(function(item,index){
						if(item[2]){
							len++;
						}
					})
					return len;
				}
			})
		})
	</script>
</html>
